<template>
  <div class="chat-container" v-if="isOpen">
    <div class="chat-header">
      <h2>172黑丝客服</h2>
      <button @click="closeChat">关闭</button>
    </div>
    <div class="chat-body">
      <div class="chat-messages">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="{'user-message': message.sender === 'user', 'seller-message': message.sender === 'seller'}"
        >
          {{ message.text }}
        </div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount, onMounted } from 'vue'
import { io } from 'socket.io-client'

// 响应式状态
const isOpen = ref(true)
const messages = ref([])
const newMessage = ref('')
const socket = ref(null)

// 初始化 socket 连接
const initSocket = () => {
  socket.value = io(process.env.VUE_APP_SOCKET_URL || 'http://localhost:3000')

  // 监听消息
  socket.value.on('messageReceived', (message) => {
    messages.value.push({ text: message, sender: 'seller' })
  })
}

// 自动回复逻辑
const autoReply = (userMessage) => {
  const replies = [
    '您好，请问有什么可以帮您？',
    '请稍等，我们正在为您处理。',
    '感谢您的咨询，我们会尽快回复您。',
    '请问您还有其他问题吗？',
    '我们的客服工作时间是每天9:00-18:00。'
  ]

  // 关键词匹配
  if (userMessage.includes('价格') || userMessage.includes('多少钱')) {
    return '我们的产品价格非常优惠，详情请查看官网。'
  }
  if (userMessage.includes('订单') || userMessage.includes('物流')) {
    return '您的订单正在处理中，请稍等。您可以提供订单号，我们会为您查询最新状态。'
  }
  if (userMessage.includes('退款') || userMessage.includes('退货')) {
    return '退款申请已提交，我们会在1-3个工作日内处理。请耐心等待。'
  }
  if (userMessage.includes('优惠') || userMessage.includes('折扣')) {
    return '我们目前有优惠活动，详情请查看官网或联系客服获取更多信息。'
  }
  if (userMessage.includes('技术支持') || userMessage.includes('帮助')) {
    return '如需技术支持，请访问我们的帮助中心或联系技术支持团队。'
  }
  if (userMessage.includes('发票') || userMessage.includes('收据')) {
    return '发票可以在订单完成后申请，请提供您的订单号和邮箱地址。'
  }
  if (userMessage.includes('会员') || userMessage.includes('VIP')) {
    return '我们的会员计划提供多种优惠和专属服务，详情请查看官网。'
  }
  if (userMessage.includes('地址') || userMessage.includes('位置')) {
    return '我们的公司地址是：北京市朝阳区某某路123号。'
  }
  if (userMessage.includes('电话') || userMessage.includes('联系方式')) {
    return '我们的客服电话是：400-123-4567，工作时间是每天9:00-18:00。'
  }
  if (userMessage.includes('投诉') || userMessage.includes('建议')) {
    return '感谢您的反馈，我们会尽快处理并联系您。'
  }
  if (userMessage.includes('合作') || userMessage.includes('商务')) {
    return '如有合作意向，请发送邮件至 partnership@example.com，我们会尽快与您联系。'
  }

  // 随机选择一个回复
  return replies[Math.floor(Math.random() * replies.length)]
}

// 初始化 easyliao 插件
const initEasyliao = () => {
  if (typeof window.jesong !== 'undefined') {
    window.jesong.init({
      cId: '您的公司ID', // 替换为您的公司ID
      onMessageReceived: (message) => {
        // 将 easyliao 的消息显示在聊天窗口中
        messages.value.push({ text: message, sender: 'seller' })
      }
    })
  }
}

// 发送消息
const sendMessage = () => {
  if (newMessage.value.trim() !== '') {
    // 添加用户消息
    messages.value.push({ text: newMessage.value, sender: 'user' })

    // 通过 easyliao 发送消息
    if (typeof window.jesong !== 'undefined') {
      window.jesong.sendMessage(newMessage.value)
    }

    // 通过 WebSocket 发送消息
    if (socket.value) {
      socket.value.emit('sendMessage', newMessage.value)
    }

    // 调用自动回复
    const reply = autoReply(newMessage.value)

    // 模拟延迟回复
    setTimeout(() => {
      messages.value.push({ text: reply, sender: 'seller' })

      // 通过 easyliao 发送自动回复
      if (typeof window.jesong !== 'undefined') {
        window.jesong.sendMessage(reply)
      }

      // 通过 WebSocket 发送自动回复
      if (socket.value) {
        socket.value.emit('sendMessage', reply)
      }
    }, 1000) // 1秒后回复

    newMessage.value = '' // 清空输入框
  }
}

// 关闭聊天
const closeChat = () => {
  isOpen.value = false
  if (socket.value) {
    socket.value.disconnect()
    socket.value = null
  }
  window.location.reload() // 关闭聊天时刷新页面
}

// 清理 socket 连接
onBeforeUnmount(() => {
  if (socket.value) {
    socket.value.disconnect()
    socket.value = null
  }
})

// 组件挂载时初始化
onMounted(() => {
  initSocket()
  initEasyliao()

  // 打开界面时发送欢迎消息
  const welcomeMessage = '您好，有什么可以帮您？'
  messages.value.push({ text: welcomeMessage, sender: 'seller' })

  // 通过 easyliao 发送欢迎消息
  if (typeof window.jesong !== 'undefined') {
    window.jesong.sendMessage(welcomeMessage)
  }

  // 通过 WebSocket 发送欢迎消息
  if (socket.value) {
    socket.value.emit('sendMessage', welcomeMessage)
  }
})
</script>

<style scoped>
.chat-container {
  position: fixed;
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 通过平移实现居中 */
  width: 500px; /* 增大宽度 */
  height: 600px; /* 增大高度 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 1000; /* 确保聊天框在最上层 */
}

.chat-body {
  flex: 1;
  padding: 10px;
  max-height: 500px; /* 根据需要调整最大高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.chat-header {
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-input {
  padding: 10px;
  border-top: 1px solid #ccc;
  display: flex;
}

.chat-input input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.chat-input button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #0056b3;
}

.user-message,
.seller-message {
  margin: 5px 0;
  padding: 5px 10px;
  border-radius: 5px;
}

.user-message {
  text-align: right;
  background-color: #e3f2fd;
  color: #007bff;
}

.seller-message {
  text-align: left;
  background-color: #f1f1f1;
  color: #333;
}
</style>
